<template>
  <uni-nav-bar title="加注机" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">{{TeamInfo.station.name}}</view>
  <view class="package">
    <view>加注机</view>
    <view class="fill">
      <view v-for="item in hobby" :key='item.text' @click="addFill(item.id)" :class="checkbox2.indexOf(item.id)!==-1?'active':''">
        {{item.name}}
      </view>
    </view>
  </view>
  <view class="add" @click="submit()">确定</view>
  <view style="width:100%;height:1px;"></view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { getFillList } from '@/gql/administrator';
  import { ref } from 'vue';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  /**
    * 加注机
    * @param {Array} checkbox2  选中加注机列表
    * @param {Array} hobby  加注机列表
    * @param {String} keyID  大客户iD
    * @return
    */
  const checkbox2 = ref([])
  const hobby = ref([])
  //加注机列表
  FillAll()
  function FillAll() {
    showLoading('正在加载');
    const payload = {
      query: getFillList
    };
    toPublish('ql/control/getFillList', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      hobby.value = data.getFillList;
    });
  }
  function addFill(id : number) {
    if (checkbox2.value.indexOf(id) === -1) {
      checkbox2.value.push(id)
    } else {
      checkbox2.value.map((item, index) => item === id ? checkbox2.value.splice(index) : '')
    }
  }
  function submit() {
    if (!checkbox2.value) {
      errorToast('请选择加注机')
      return
    }
    showLoading('正在提交');
    const payload = {
      delivery_id: Number(TeamInfo.station.id),
      fill_ids: checkbox2.value.join(',')
    };
    toPublish('control/addDeliveryFillShou', payload, (obj : any) => {
      const { code, msg } = obj;
      if (code === 1) {
        successToast('提交成功');
        setTimeout(() => {
          navBack()
        }, 1000)
      } else {
        errorToast(msg);
      }
    });
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 40rpx auto 20rpx;
    font-size: 32rpx;
  }

  .fill {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    view {
      padding: 8rpx 30rpx;
      box-sizing: border-box;
      background: #ECF0F6;
      color: #333;
      border-radius: 5px;
      margin: 15rpx 10rpx;
    }

    .active {
      background: #2694FB;
      color: #fff;
    }
  }
</style>